<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app3">
        <p>
            Look at the parent's data:
            <mark>{{t}}</mark>
            & the child's data:
            <mark>{{childWords}}</mark>
        </p>
        <child v-on:add="pChange"></child>  <!--on表示监听，意思是父组件监听子组件的变化，这里就是监听子组件add函数的操作对于父组件pChange函数的操作-->
        <child v-on:add="pChange"></child>
        <child v-on:click.native="native"></child>
    </div>
</body>
<script src="http://cdn.bootcss.com/vue/2.2.1/vue.js"></script>
<script>
Vue.component('child',{
    template : '<button v-on:click="add">{{c}}</button>',
    data : function () {
        return {
            c : 0,
            msg : 'this is child msg!'
        }
    },
    methods : {
        add : function () {
            this.c += 1;
            //子组件如果需要向父组件传递数据，emit触发条件，这里是触发add向父组件传递子组件msg数据
            //又因为父组件监听了add函数，操作pChange,所以，该msg会传递给父组件
            this.$emit('add',this.msg);
        }
    }
});
var vm = new Vue({
    el : "#app3",
    data : {
        t : 0,
        childWords : 'ricky'
    },
    methods : {
        pChange : function(msg){//该msg是子组件传递过来的
            this.t += 1;
            this.childWords = msg;
        },
        native:function () {
            alert('I am a native event ,which comes from the root element！');
        }
    }
});
</script>
</html>